Hexo 实现代码折叠功能

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 846 阅读时长 ≈ 3 分钟

前提

博主在使用 next 主题过程中，没有发现代码折叠相关的配置，于是开始动手折腾。

本博客环境

image.png

image.png

配置

由于博主的 next 主题是使用 npm安装的，所以下文中除了特殊说明以外的添加修改文件操作，均在 node_modules/hexo-theme-next 目录下进行。

如果是通过 git 部署的话，则在 themes/next 下进行。

添加 code-unfold.js

source/js/code-unfold.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var CODE_MAX_HEIGHT = 200;
var containers = [];

// 展开
$('body').on('click', '.js_unfold_code_btn', function () {
    $(this).closest('.js_highlight_container').addClass('on');
});
// 收起
$('body').on('click', '.js_retract_code_btn', function () {
    var $container = $(this).closest('.js_highlight_container').removeClass('on');
    var winTop = $(window).scrollTop();
    var offsetTop = $container.offset().top;
    $(this).css('top', 0);
    if (winTop > offsetTop) {
        // 设置滚动条位置
        $('body, html').animate({
            scrollTop: $container.offset().top - CODE_MAX_HEIGHT
        }, 600);
    }
});
// 滚动事件，触发动画效果
$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    var temp = [];
    for (let i = 0; i < containers.length; i++) {
        var item = containers[i];
        var { $container, height, $hide, hasHorizontalScrollbar } = item;
        if ($container.closest('body').length === 0) {
            // 如果 $container 元素已经不在页面上, 则删除该元素
            // 防止pjax页面跳转之后，元素未删除
            continue;
        }
        temp.push(item);
        if (!$container.hasClass('on')) {
            continue;
        }
        var offsetTop = $container.offset().top;
        var hideBtnHeight = $hide.outerHeight();
        // 减去按钮高度，减去底部滚动条高度
        var maxTop = parseInt(height - (hasHorizontalScrollbar ? 17 : 0) - hideBtnHeight);
        let top = parseInt(
            Math.min(
                Math.max(scrollTop - offsetTop, 0), // 如果小于 0 ，则取 0
                maxTop,// 如果大于 height ，则取 height
            )
        );
        // 根据 sin 曲线设置"收起代码"位置
        var halfHeight = parseInt($(window).height() / 2 * Math.sin((top / maxTop) * 90 * (2 * Math.PI / 360)));
        $hide.css('top', Math.min(top + halfHeight, maxTop));
    }
    containers = temp;
});

// 添加隐藏容器
function addCodeWrap($node) {
    var $container = $node.wrap('<div class="js_highlight_container highlight-container"><div class="highlight-wrap"></div></div>').closest('.js_highlight_container');

    // 底部 "展开代码" 与 侧边栏 "收起代码"
    var $btn = $(`
    <div class="highlight-footer">
      <a class="js_unfold_code_btn show-btn" href="javascript:;">展开代码<i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </div>
    <a class="js_retract_code_btn hide-btn" href="javascript:;"><i class="fa fa-angle-up" aria-hidden="true"></i>收起代码</a>
  `);

    $container.append($btn);
    return $container;
};

function codeUnfold() {
    $('.highlight').each(function () {
        // 防止重复渲染
        if (this.__render__ === true) {
            return true;
        }
        this.__render__ = true;
        var $this = $(this);
        var height = $(this).outerHeight();
        if (height > CODE_MAX_HEIGHT) {
            // 添加展开&收起容器
            var $container = addCodeWrap($this, height);
            containers.push({
                $container,
                height,
                $hide: $container.find('.js_retract_code_btn'),
                hasHorizontalScrollbar: this.scrollWidth > this.offsetWidth,
            });
        }
    });
};

引用 js

修改文件 layout/_scripts/index.njk，在最后添加：

1
{{- next_js('code-unfold.js') }}

修改文件 layout/_scripts/vendors.njk，在最后添加：

1
<script src="https://awp-assets.meituan.net/thh/thh_feb_web_portal/js/jquery-3.6.0.min.js"/>

修改文件 source/js/next-boot.js

1
2
3
4
5
NexT.boot.refresh = function() {
  // 添加一行代码
  codeUnfold()

  ...

添加样式

参考 next 的自定义文件方式，在 hexo 站点下创建或修改 source/_data/styles.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// 展开收起效果
.highlight-container
  position: relative
  background-color: highlight-background
  &.on
    .highlight-footer
      display: none
    .hide-btn
      display: flex
    .highlight-wrap
      max-height: none
  .highlight-wrap
    overflow: hidden
    max-height: 200px
  .highlight-footer
    position absolute
    width: 100%
    left: 0
    bottom: 0
    height: 60px
    background-image: 'linear-gradient(-180deg, rgba(255,255,255,0) 0%, %s 65%)' % highlight-background;
    text-align: center
  .show-btn
    font-size: 12px
    color: #fff
    position: absolute
    left: 50%
    transform: translateX(-50%)
    bottom: 0
    line-height: 2em
    text-decoration: none
    padding: 0 0.8em
    text-align: center
    border-radius: 4px 4px 0
    &:hover
      text-decoration: none
  .hide-btn
    color: #fff
    font-size: 12px
    width: 22px
    position: absolute
    left: -21px
    top: 0
    line-height: 1em
    text-decoration: none
    text-align: center
    display: none
    flex-direction: column
    background-color: highlight-background
    border-radius: 4px 0 0 4px
    padding: 0.1em 0 0.6em
    transition: top ease 0.35s
  .fa-angle-up,
  .fa-angle-down
    font-style: normal
    color: #fff
  .fa-angle-up:before
    content:"\f106"
  .fa-angle-down:before
    content:"\f107"
    margin-left: 0.5em
  .js_unfold_code_btn, .js_retract_code_btn
    background: rgba(0,0,0,0.5)
    border-bottom: none !important
    &:hover
      border-bottom-color: none !important

记得去掉 _config.next.yml 中的注释

1
2
custom_file_path:
  style: source/_data/styles.styl

配置完成后，需要重新清理部署。

这样我们就完成了 hexo 的长代码折叠功能。上文代码块采用的方案即是这种。

参考

hexo博客代码折叠功能 | 代码构建你的世界